import React from 'react'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'
import NormalTimePicker from '../DatePicker/NormalTimePicker'
import Popover from '@material-ui/core/Popover'
import Fade from '@material-ui/core/Fade'
import Paper from '@material-ui/core/Paper'
import {
    TableEditRow
} from '@devexpress/dx-react-grid-material-ui';

const styles = theme => ({

})
const PROPS_BLACKLIST = [
    'timeFormat',
];

const cleanProps = (props) => {
    PROPS_BLACKLIST.forEach(field => delete props[field]);
    return props;
};

class TimeTextField extends React.Component  {

    state = {
        anchorEl: null,
        currentHour: 0,
        currentMinute: 0,
        currentSecond: 0
    }
    handleFocusText = event => {
        this.setState({anchorEl:event.currentTarget})
    }

    handleFocusClose = () => {
        this.setState({anchorEl: null})
    }

    activeDatePickerValue = (value, currentHour,currentMinute, currentSecond) => {
        //TODO 设置时间的格式
        //const { timeFormat } = this.props

        this.setState({ currentHour: currentHour,currentMinute: currentMinute, currentSecond: currentSecond})

        this.props.onValueChange(value)

    }

    render(){

        const { ...props } = this.props;
        const { anchorEl,currentHour, currentMinute, currentSecond} = this.state
        cleanProps(props);
        const open = Boolean(anchorEl);

        return (
            <React.Fragment>
                <TableEditRow.Cell {...props} onClick={this.handleFocusText}>
                </TableEditRow.Cell>
                <Popover
                    anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'left',
                    }}
                    transformOrigin={{
                        vertical: 'top',
                        horizontal: 'left',
                    }}
                    id="simple-popper"
                    open={open}
                    anchorEl={anchorEl}
                    onClose={this.handleFocusClose}>
                    <Fade  timeout={250} in={true}>
                        <Paper>
                            <NormalTimePicker currentHour={currentHour}
                                              currentMinute={currentMinute}
                                              currentSecond={currentSecond}
                                              onSelect={ this.activeDatePickerValue }></NormalTimePicker>
                        </Paper>
                    </Fade>
                </Popover>
            </React.Fragment>
        )
    }
}
TimeTextField.defaultProps = {
    timeFormat: 'hh:mm:ss'
}
TimeTextField.propTypes = {
    timeFormat: PropTypes.string
}
export default withStyles(styles)(TimeTextField)